import React, { FC, useCallback, useEffect, useState, useMemo } from "react";
import { Modal, Button, Table, Radio, Input } from 'antd';
import './index.less';
import { connect } from "react-redux";
import action from "../../store/Actions";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface Props {
  dormitoryReducer: any;
  getlist: Function,
  isFalg: boolean,
  close: Function,
  dataList: any,
  ssz: string,
  zrs: string,
  name: string,
  dataQuery: Array<any>,
  DormitoryNo: string,
  keyPath: Array<string>,
  xgsHopdata: Function,
  zhirishang: Function,
  xougaipingji: Function,
  remove: Function,
  tihuan: Function,
}
interface State {
  wid: number,
  falg: boolean,
  falg1: boolean,
  falg2: boolean,
  falg3: boolean,
  falg4: boolean,
  falg5: boolean,
  columns: Array<any>,
  columns1: Array<any>,
  columns2: Array<any>,
  initS: string,
  value: string,
  xuaie: string,
  item: any,

}
function DetailSdormitory(props: Props) {
  console.log(props.dataList);

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [state, setState] = useState<State>({
    wid: 700,
    value: '优',
    xuaie: '',
    item: {},
    falg: true,
    falg1: false,
    falg2: false,
    falg3: false,
    falg4: false,
    falg5: false,
    initS: '宿舍详情',
    columns: [
      {
        title: 'timer',
        dataIndex: 'timer',
        align: 'center',
      },
      {
        title: 'name',
        align: 'center',
        dataIndex: 'name',
        render: (text, record) => (
          <span key={record.id} className={props.dormitoryReducer.zrs === record.timer ? 'isActive' : ""}>{record.name}</span>
        ),
      },
      {
        title: '操作',
        align: 'center',
        render: (text, record) => (
          // eslint-disable-next-line jsx-a11y/anchor-is-valid
          <a key={record.id} onClick={() => { xuanzheListZrs(record) }}>{props.dormitoryReducer.zrs === record.timer ? '今日值日生' : "待选"}</a>
        ),
      },
    ],
    columns1: [
      {
        title: 'id',
        align: 'center',
        dataIndex: 'id',
      },
      {
        title: 'name',
        align: 'center',
        dataIndex: 'name',
        render: (text, record, i) => (
          <span key={record.id} className={record.falgboolean === true ? 'isActive' : ""}>{record.name}</span>
        ),
      },
      {
        title: '操作',
        align: 'center',
        render: (text, record, i) => (
          <a key={record.id} onClick={() => { xuanzheList(record) }}>{record.falgboolean === true ? '已选中' : '选择'}</a>
        ),
      },
    ],
    columns2: [
      {
        title: 'id',
        align: 'center',
        dataIndex: 'id',
      },
      {
        title: 'name',
        align: 'center',
        dataIndex: 'name',
      },
      {
        title: 'banji',
        align: 'center',
        dataIndex: 'banji',
      },
      {
        title: '操作',
        align: 'center',
        render: (text, record) => (
          <div key={record.id}>
            <div style={{ width: '50%', float: 'left' }} onClick={() => { tihuan(1, record) }}><a>{record.name && record.banji ? '替换' : ''}</a></div>
            <div style={{ width: '50%', float: 'left' }} onClick={() => { remove(2, record) }}><a>{record.name && record.banji ? '移除' : ''}</a></div>
            <div style={{ width: '50%', float: 'left' }} onClick={() => { addList(3,record) }}><a>{record.name==='' && record.banji==='' ? '新增' : ''}</a></div>
          </div>
        ),
      },
    ]
  });
  //宿舍长选举
  const xuanzheList = async (item) => {

    let id = localStorage.getItem('val');
    console.log(id);
    props.xgsHopdata({ keyPath: props.keyPath, DormitoryNo: props.DormitoryNo, id: id, ite: item });
    setState({
      ...state,
      falg1: false,
      item: item
    })
  }
  //确定
  const handleOk = () => {
    props.close()
  };
  //取消
  const handleCancel = () => {
    props.close()
  };
  {/* 宿舍长按钮 */ }
  const quxiao = () => {
    setState({
      ...state,
      falg: true,
      wid: 700,
      initS: '宿舍详情',
      falg1: false,
      falg2: false,
      falg3: false,
      falg4: false,
      falg5: false,
    })
  }
  // 宿舍长按钮 
  const sszlist = () => {
    setState({
      ...state,
      falg: false,
      wid: 400,
      falg1: true,
      initS: '宿舍长选举'
    })
  }
  //确定 宿舍长
  const sszlistquery = () => {
    props.close()
  }
  //值日生
  const xuanzheListZrs = (item) => {
    var now = new Date();
    var day = now.getDay();
    var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var week = weeks[day];
    let id = localStorage.getItem('val');
    props.zhirishang({ keyPath: props.keyPath, item: item, id: id, inset: week });
    setState({
      ...state,
      falg2: false,
    })
  }
  // 值日生轮流表
  const zrsllb = () => {
    setState({
      ...state,
      falg: false,
      wid: 400,
      falg2: true,
      initS: '值日生表'
    })
  }
  //宿舍名单
  const ssmdan = () => {
    setState({
      ...state,
      falg: false,
      wid: 450,
      falg3: true,
      initS: '宿舍名单'
    })
  }
  //设置宿舍评级
  const szsspj = () => {
    setState({
      ...state,
      falg: false,
      wid: 300,
      falg4: true,
      initS: '宿舍评级'
    })

  }
  //设置住宿费
  const szzsf = () => {
    setState({
      ...state,
      falg: false,
      wid: 500,
      falg5: true,
      initS: '设置住宿费'
    })
  }
  const onChangeList = (e, item) => {
    props.xougaipingji({
      e: e.target.value,
      item: item.id
    });
    setState({
      ...state,
      value: e.target.value,
      falg4: false,
      falg: true,
      wid: 700,
    })
  }
  const change = (e) => {
    console.log(e.target.value);
  }
  //替换
  const tihuan = (index, item) => {
    if(index===1){
      let id = localStorage.getItem('val');
      props.tihuan({ keyPath: props.keyPath, DormitoryNo: props.DormitoryNo, id: id, ite: item });
      setState({
        ...state,
        falg: true,
        falg3: false,
      })
    }
  }
  //移除
  const remove = (index, item) => {
    console.log(index);
    if (index === 2) {
      let id = localStorage.getItem('val');
      props.remove({ keyPath: props.keyPath, DormitoryNo: props.DormitoryNo, id: id, ite: item });
      setState({
        ...state,
        falg: true,
        falg3: false,
      })
    }
  }
  const addList=(index,item)=>{
    console.log(item);
    
  }
  return (
    <div className="modaltm">
      <Modal style={{ top: '0px' }} centered cancelText="取消" okText="确定" width={state.wid} title={props.dormitoryReducer.DormitoryNo + `${state.initS}`} visible={props.isFalg} onOk={handleOk} onCancel={handleCancel}>
        <div>
          {
            state.falg ?
              <div>
                <div style={{ borderBottom: '2px solid rgba(173,176,187) ', width: '380px', height: '60px', margin: '0 auto', textAlign: 'center', fontSize: '25px', color: 'rgba(173,176,187)' }}>窗</div>
              </div>
              : null
          }
          {
            props.dormitoryReducer.dataList.map((item, i) => {
              // console.log(item);
              return <div key={i} style={{ width: '100%', position: 'relative' }}>
                {
                  state.falg ? <div>
                    <div style={{ width: '23px', margin: '0 auto', height: 'auto', fontSize: '24px', color: 'rgba(173,176,187)' }}>
                      <span style={{ marginTop: '20px' }}>
                        走廊
                      </span>
                    </div>
                    {/* 上 */}
                    <div className={item.person[0].timer === props.dormitoryReducer.zrs ? 'active' : ''} style={{ background: 'rgba(255, 255, 255)', boxShadow: '0px 0px 5px #888888', width: '59px', height: '140px', border: '1px solid #ccc', borderRadius: '4px', position: 'absolute', left: "70px", top: "4px", zIndex: '999' }}>
                      <div className={item.person[0].falgboolean === true ? 'act' : ''} style={{ marginTop: '10px', marginLeft: '15px', marginBottom: '10px', color: 'white', background: 'rgba(44, 101, 247)', width: '30px', height: '30px', borderRadius: '50%', textAlign: "center", lineHeight: '30px' }}> {item.person[0].id}</div>
                      <div style={{ width: '30px', height: '90px', margin: "0 auto", fontSize: '17px', textAlign: 'center' }}>
                        {item.person[0].name}
                      </div>
                    </div>
                    <div className={item.person[1].timer === props.dormitoryReducer.zrs ? 'active' : ''} style={{ background: 'rgba(237, 237, 237)', boxShadow: '0px 0px 5px #888888', width: '59px', height: '140px', border: '1px solid #ccc', borderRadius: '4px', position: 'absolute', left: "116px", top: "27px", }}>
                      <div className={item.person[1].falgboolean === true ? 'act' : ''} style={{ marginTop: '10px', marginLeft: '15px', marginBottom: '10px', color: 'white', background: 'rgba(44, 101, 247)', width: '30px', height: '30px', borderRadius: '50%', textAlign: "center", lineHeight: '30px' }}> {item.person[1].id}</div>
                      <div style={{ width: '30px', height: '90px', margin: "0 auto", fontSize: '17px', textAlign: 'center' }}>
                        {item.person[1].name}
                      </div>
                    </div>
                    <div className="border"></div>
                    <div className="border1"></div>
                    <div className="border2"></div>
                    {/* 下 */}
                    <div className={item.person[4].timer === props.dormitoryReducer.zrs ? 'active' : ''} style={{ background: 'rgba(255, 255, 255)', boxShadow: '0px 0px 5px #888888', width: '59px', height: '140px', border: '1px solid #ccc', borderRadius: '4px', position: 'absolute', left: "70px", top: "173px", zIndex: '999' }}>
                      <div className={item.person[4].falgboolean === true ? 'act' : ''} style={{ marginTop: '10px', marginLeft: '15px', marginBottom: '10px', color: 'white', background: 'rgba(44, 101, 247)', width: '30px', height: '30px', borderRadius: '50%', textAlign: "center", lineHeight: '30px' }}> {item.person[4].id}</div>
                      <div style={{ width: '30px', height: '90px', margin: "0 auto", fontSize: '17px', textAlign: 'center' }}>
                        {item.person[4].name}
                      </div>
                    </div>
                    <div className={item.person[5].timer === props.dormitoryReducer.zrs ? 'active' : ''} style={{ background: 'rgba(237, 237, 237)', boxShadow: '0px 0px 5px #888888', width: '59px', height: '140px', border: '1px solid #ccc', borderRadius: '4px', position: 'absolute', left: "116px", top: "196px", }}>
                      <div className={item.person[5].falgboolean === true ? 'act' : ''} style={{ marginTop: '10px', marginLeft: '15px', marginBottom: '10px', color: 'white', background: 'rgba(44, 101, 247)', width: '30px', height: '30px', borderRadius: '50%', textAlign: "center", lineHeight: '30px' }}> {item.person[5].id}</div>
                      <div style={{ width: '30px', height: '90px', margin: "0 auto", fontSize: '17px', textAlign: 'center' }}>
                        {item.person[3].name}
                      </div>
                    </div>
                    <div className="border3"></div>
                    <div className="border4"></div>
                    <div className="border5"></div>
                    {/* 右上 */}
                    <div className={item.person[2].timer === props.dormitoryReducer.zrs ? 'active' : ''} style={{ background: 'rgba(255, 255, 255)', boxShadow: '0px 0px 5px #888888', width: '59px', height: '140px', border: '1px solid #ccc', borderRadius: '4px', position: 'absolute', right: "70px", top: "4px", zIndex: '999' }}>
                      <div className={item.person[2].falgboolean === true ? 'act' : ''} style={{ marginTop: '10px', marginLeft: '15px', marginBottom: '10px', color: 'white', background: 'rgba(44, 101, 247)', width: '30px', height: '30px', borderRadius: '50%', textAlign: "center", lineHeight: '30px' }}> {item.person[2].id}</div>
                      <div style={{ width: '30px', height: '90px', margin: "0 auto", fontSize: '17px', textAlign: 'center' }}>
                        {item.person[2].name}
                      </div>
                    </div>
                    <div className={item.person[3].timer === props.dormitoryReducer.zrs ? 'active' : ''} style={{ background: 'rgba(237, 237, 237)', boxShadow: '0px 0px 5px #888888', width: '59px', height: '140px', border: '1px solid #ccc', borderRadius: '4px', position: 'absolute', right: "116px", top: "27px", }}>
                      <div className={item.person[3].falgboolean === true ? 'act' : ''} style={{ marginTop: '10px', marginLeft: '15px', marginBottom: '10px', color: 'white', background: 'rgba(44, 101, 247)', width: '30px', height: '30px', borderRadius: '50%', textAlign: "center", lineHeight: '30px' }}> {item.person[3].id}</div>
                      <div style={{ width: '30px', height: '90px', margin: "0 auto", fontSize: '17px', textAlign: 'center' }}>
                        {item.person[3].name}
                      </div>
                    </div>
                    <div className="border6"></div>
                    <div className="border7"></div>
                    <div className="border8"></div>
                    {/* 右下 */}
                    <div className={item.person[6].timer === props.dormitoryReducer.zrs ? 'active' : ''} style={{ background: 'rgba(255, 255, 255)', boxShadow: '0px 0px 5px #888888', width: '59px', height: '140px', border: '1px solid #ccc', borderRadius: '4px', position: 'absolute', right: "70px", top: "173px", zIndex: '999' }}>
                      <div className={item.person[6].falgboolean === true ? 'act' : ''} style={{ marginTop: '10px', marginLeft: '15px', marginBottom: '10px', color: 'white', background: 'rgba(44, 101, 247)', width: '30px', height: '30px', borderRadius: '50%', textAlign: "center", lineHeight: '30px' }}> {item.person[6].id}</div>
                      <div style={{ width: '30px', height: '90px', margin: "0 auto", fontSize: '17px', textAlign: 'center' }}>
                        {item.person[6].name}
                      </div>
                    </div>
                    <div className={item.person[7].timer === props.dormitoryReducer.zrs ? 'active' : ''} style={{ background: 'rgba(237, 237, 237)', boxShadow: '0px 0px 5px #888888', width: '59px', height: '140px', border: '1px solid #ccc', borderRadius: '4px', position: 'absolute', right: "116px", top: "196px", }}>
                      <div className={item.person[7].falgboolean === true ? 'act' : ''} style={{ marginTop: '10px', marginLeft: '15px', marginBottom: '10px', color: 'white', background: 'rgba(44, 101, 247)', width: '30px', height: '30px', borderRadius: '50%', textAlign: "center", lineHeight: '30px' }}> {item.person[7].id}</div>
                      <div style={{ width: '30px', height: '90px', margin: "0 auto", fontSize: '17px', textAlign: 'center' }}>
                        {item.person[7].name}
                      </div>
                    </div>
                    <div className="border9"></div>
                    <div className="border10"></div>
                    <div className="border11"></div>

                    {/* 详情 */}
                    <div style={{ width: '180px', margin: '0 auto' }}>
                      <div style={{ borderBottom: '1px solid #ccc', width: '100%', height: '40px', float: 'left', lineHeight: '40px' }}>
                        <span style={{ float: 'left', width: '50%' }}>宿舍人数:</span>
                        <span style={{ float: 'right', width: '50%', textAlign: 'center' }}>{props.dataList.max_number}人</span>
                      </div>
                      <div style={{ borderBottom: '1px solid #ccc', width: '100%', height: '40px', float: 'left', lineHeight: '40px' }}>
                        <span style={{ float: 'left', width: '50%' }}>宿舍长:</span>
                        <span style={{ float: 'right', width: '50%', textAlign: 'center' }}>{props.ssz}</span>
                      </div>
                      <div style={{ borderBottom: '1px solid #ccc', width: '100%', height: '40px', float: 'left', lineHeight: '40px' }}>
                        <span style={{ float: 'left', width: '50%' }}>今日值日生:</span>
                        <span style={{ float: 'right', width: '50%', textAlign: 'center' }}>{props.name}</span>
                      </div>
                      <div style={{ borderBottom: '1px solid #ccc', width: '100%', height: '40px', float: 'left', lineHeight: '40px' }}>
                        <span style={{ float: 'left', width: '50%' }}>优秀宿舍次数:</span>
                        <span style={{ float: 'right', width: '50%', textAlign: 'center' }}>{item.count}次</span>
                      </div>
                      <div style={{ borderBottom: '1px solid #ccc', width: '100%', height: '40px', float: 'left', lineHeight: '40px' }}>
                        <span style={{ float: 'left', width: '50%' }}>差评次数:</span>
                        <span style={{ float: 'right', width: '50%', textAlign: 'center' }}>{item.c_count}次</span>
                      </div>
                      <p style={{ color: 'white' }}>1</p>
                    </div>
                    <div style={{ width: '100%', float: 'left', margin: '45px 0' }}>
                      <span style={{ margin: '0 7px' }}>
                        <Button type="primary" style={{ width: '116px', borderRadius: '5px', height: '37px', background: 'rgba(44, 101, 247)' }}
                          onClick={() => { sszlist() }}>
                          宿舍长
                        </Button>
                      </span>
                      <span style={{ margin: '0 7px' }}>
                        <Button onClick={() => { zrsllb() }} type="primary" style={{ width: '116px', borderRadius: '5px', height: '37px', background: 'rgba(44, 101, 247)' }}>
                          值日生轮流表
                        </Button>
                      </span>
                      <span style={{ margin: '0 7px' }}>
                        <Button type="primary" onClick={() => { ssmdan() }} style={{ width: '116px', borderRadius: '5px', height: '37px', background: 'rgba(44, 101, 247)' }}>
                          宿舍名单
                        </Button>
                      </span>
                      <span style={{ margin: '0 7px' }}>
                        <Button type="primary" onClick={() => { szsspj() }} style={{ width: '116px', borderRadius: '5px', height: '37px', background: 'rgba(44, 101, 247)' }}>
                          设置宿舍评级
                        </Button>
                      </span>
                      <span style={{ margin: '0 7px' }}>
                        <Button type="primary" onClick={() => { szzsf() }} style={{ width: '116px', borderRadius: '5px', height: '37px', background: 'rgba(44, 101, 247)' }}>
                          设置住宿费
                        </Button>
                      </span>
                    </div>
                  </div> : null
                }
                {
                  state.falg1 ?
                    <div>
                      <Table
                        columns={state.columns1}
                        showHeader={false}
                        dataSource={item.person}
                        pagination={false}
                        bordered />
                    </div> : null
                }
                {
                  state.falg2 ?
                    <div>
                      <Table
                        columns={state.columns}
                        showHeader={false}
                        dataSource={item.person.filter(item => item.falgboolean === false)}
                        pagination={false}
                        bordered />
                    </div> : null
                }
                {
                  state.falg3 ?
                    <div>
                      <Table
                        columns={state.columns2}
                        showHeader={false}
                        dataSource={item.person}
                        pagination={false}
                        bordered />
                    </div> : null
                }
                {
                  state.falg4 ?
                    <div>
                      <Radio.Group onChange={(e) => { onChangeList(e, item) }} value={state.value}>
                        <Radio value={'优'} >
                          <div style={{ width: '200px', height: '40px', borderRadius: '5px', fontSize: '22px', float: 'left', background: 'rgba(242, 74, 114)' }}>优</div></Radio>
                        <Radio value={'差'}>
                          <div style={{ width: '200px', height: '40px', fontSize: '22px', borderRadius: '5px', background: 'rgba(46, 176, 134)' }}>差</div>
                        </Radio>
                      </Radio.Group>
                    </div> : null
                }
                {
                  state.falg5 ?
                    <div>
                      {
                        item.person.map((ite) => {
                          return (
                            <div style={{ width: '100%', height: '50px' }}>
                              <div style={{ width: '100px', height: '50px', float: 'left', lineHeight: '30px', fontSize: '16px' }}><span>{ite.name}</span>:</div>
                              <div style={{ width: '200px', height: '50px', float: 'left' }}>
                                <Input onChange={(e) => { change(e) }} placeholder="Basic usage" value={ite.classParser} />
                              </div>
                            </div>
                          )
                        })
                      }
                    </div> : null
                }
              </div>
            })
          }
        </div>
        {/* 默认按钮 */}
        {
          state.falg ? <div style={{ width: '100%', height: '50px', zIndex: '999', position: 'absolute', bottom: "0", right: '0', background: '#fff' }}>
            <Button type="primary" style={{ width: '100px', marginRight: '15px', float: 'right', borderRadius: '5px', height: '37px', background: 'rgba(44, 101, 247)' }} onClick={handleOk}>
              确定
            </Button>
            <Button type="primary" style={{ width: '100px', marginRight: '15px', color: '#000', float: 'right', borderRadius: '5px', height: '37px', background: '#fff' }} onClick={handleCancel} >
              取消
            </Button>
          </div> : null
        }
        {/* 宿舍长按钮 */}
        {
          state.falg1 ? <div style={{ width: '100%', height: '50px', zIndex: '999', position: 'absolute', bottom: "0", right: '0', background: '#fff' }}>
            <Button onClick={() => { sszlistquery() }} type="primary" style={{ width: '100px', marginRight: '15px', float: 'right', borderRadius: '5px', height: '37px', background: 'rgba(44, 101, 247)' }} >
              确定
            </Button>
            <Button onClick={() => { quxiao() }} type="primary" style={{ width: '100px', marginRight: '15px', color: '#000', float: 'right', borderRadius: '5px', height: '37px', background: '#fff' }} >
              取消
            </Button>
          </div> : null
        }
        {/* 值日生轮流表 */}
        {
          state.falg2 ? <div style={{ width: '100%', height: '50px', zIndex: '999', position: 'absolute', bottom: "0", right: '0', background: '#fff' }}>
            <Button onClick={() => { props.close() }} type="primary" style={{ width: '100px', marginRight: '15px', float: 'right', borderRadius: '5px', height: '37px', background: 'rgba(44, 101, 247)' }} >
              确定
            </Button>
            <Button type="primary" onClick={() => { quxiao() }} style={{ width: '100px', marginRight: '15px', color: '#000', float: 'right', borderRadius: '5px', height: '37px', background: '#fff' }} >
              取消
            </Button>
          </div> : null
        }
        {/* 宿舍名单 */}
        {
          state.falg3 ? <div style={{ width: '100%', height: '50px', zIndex: '999', position: 'absolute', bottom: "0", right: '0', background: '#fff' }}>
            <Button onClick={() => { props.close() }} type="primary" style={{ width: '100px', marginRight: '15px', float: 'right', borderRadius: '5px', height: '37px', background: 'rgba(44, 101, 247)' }} >
              确定
            </Button>
            <Button type="primary" onClick={() => { quxiao() }} style={{ width: '100px', marginRight: '15px', color: '#000', float: 'right', borderRadius: '5px', height: '37px', background: '#fff' }} >
              取消
            </Button>
          </div> : null
        }
        {/* 设置宿舍评级 */}
        {
          state.falg4 ? <div style={{ width: '100%', height: '50px', zIndex: '999', position: 'absolute', bottom: "0", right: '0', background: '#fff' }}>
            <Button onClick={() => { props.close() }} type="primary" style={{ width: '100px', marginRight: '15px', float: 'right', borderRadius: '5px', height: '37px', background: 'rgba(44, 101, 247)' }}>
              确定
            </Button>
            <Button type="primary" onClick={() => { quxiao() }} style={{ width: '100px', marginRight: '15px', color: '#000', float: 'right', borderRadius: '5px', height: '37px', background: '#fff' }}>
              取消
            </Button>
          </div> : null
        }
        {/* 设置住宿费*/}
        {
          state.falg5 ? <div style={{ width: '100%', height: '50px', zIndex: '999', position: 'absolute', bottom: "0", right: '0', background: '#fff' }}>
            <Button onClick={() => { props.close() }} type="primary" style={{ width: '100px', marginRight: '15px', float: 'right', borderRadius: '5px', height: '37px', background: 'rgba(44, 101, 247)' }}>
              确定
            </Button>
            <Button type="primary" onClick={() => { quxiao() }} style={{ width: '100px', marginRight: '15px', color: '#000', float: 'right', borderRadius: '5px', height: '37px', background: '#fff' }} >
              取消
            </Button>
          </div> : null
        }
      </Modal>
    </div>
  );
}

export default connect(state => state, action.dormitoryActions)(DetailSdormitory)
